<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>EasyUI-3-菜单按钮</title>
	<script type="text/javascript"
			src="/js/jquery-easyui-1.4.1/jquery.min.js"></script>
	<script type="text/javascript"
			src="/js/jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
	<script type="text/javascript"
			src="/js/jquery-easyui-1.4.1/locale/easyui-lang-zh_CN.js"></script>
	<link rel="stylesheet" type="text/css"
		  href="/js/jquery-easyui-1.4.1/themes/icon.css" />
	<link rel="stylesheet" type="text/css"
		  href="/js/jquery-easyui-1.4.1/themes/default/easyui.css" />
	<script type="text/javascript">
		/*通过js创建表格  */
		$(function(){
			$("#table3").datagrid({
				/*定义工具栏  */
				toolbar: [{
					iconCls: 'icon-edit',
					text:  "编辑",
					handler: function(){alert("点击工具栏")}
				},'-',{
					iconCls: 'icon-help',
					handler: function(){alert('帮助工具栏')}
				},'-',{
					iconCls: 'icon-save',
					handler: function(){alert('保存工具栏')}
				}],
				columns:[[
					{field:'itemIds',checkbox:true},
					{field:'itemId',title:'商品Id',width:100},
					{field:'itemName',title:'商品名称',width:100},
					{field:'itemDesc',title:'商品描述',width:100,align:'right'}
				]],
				fitColumns:true,		  //自动适应
				url:"datagrid_item.json", //请求数据的地址
				method:"get",			  //提交方式
				striped:true,			  //有条纹的行
				nowrap:true,			  //提高加载性能
				loadMsg:"正在加载",		  //加载数据时打印
				pagination:true,		  //分页加载
				rownumbers:true,		  //显示行号
				//singleSelect:true,	      //只允许选中一行数据
			})
		})
	</script>
</head>
<body>
<h1>Easy-表格数据1</h1>
<div>
	<table  class="easyui-datagrid" style="width:400px;height:250px">
		<thead>
		<tr>
			<th data-options="field:'code'">Code</th>
			<th data-options="field:'name'">Name</th>
			<th data-options="field:'price'">Price</th>
		</tr>
		</thead>
		<tbody>
		<tr>
			<td>001</td>
			<td>name1</td>
			<td>2323</td>
		</tr>

		<tr>
			<td>002</td>
			<td>name2</td>
			<td>4612</td>
		</tr>

		<tr>
			<td>003</td>
			<td>name3</td>
			<td>4612</td>
		</tr>
		</tbody>
	</table>
</div>
<hr/>
<h1>通过数据请求创建表格</h1>
<div>
	定义表格，并且通过url访问json数据， fitColumns:true表示自动适应，singleSelect:true 表示选中单个
	<table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:false,pagination:true">
		<thead>
		<tr>
			<th data-options="field:'code',width:100">Code</th>
			<th data-options="field:'name',width:100">Name</th>
			<th data-options="field:'price',width:100,align:'right'">Price</th>
		</tr>
		</thead>
	</table>
</div>
<hr/>
<h1>通过js创建表格</h1>
<table id="table3" style="width:700px">

</table>
</body>
</html>